<!-- 创建方案 -->
 <template>
  <div>
    <div class="header-btn">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" @click="addOrUpdateTask" :loading="addLoading">确认</el-button>
        <el-button type="info" plain @click="goBack">返回</el-button>
      </div>
    </div>
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"
      style="position: relative">
      <div class="wrap g-card" style="margin-bottom: 20px;padding-top:20px">
        <el-form-item label="方案名称" prop="aaaa" required>
          <el-input type="text" placeholder="请输入" v-model="form.aaaa" style="width: 600px" />
        </el-form-item>
        <el-form-item label="群聊名称" prop="aaaa" required>
          <div class="groupContent-button">
            <el-button @click="Openpopover" class="button-new-tag" size="small" style="height: 30px">
              <svg-icon icon-class="add" /> 选择群聊
            </el-button>
            <div v-if="form.groupName" class="groupContent-img">
              {{ form.groupName }}
            </div>
          </div>
        </el-form-item>
        <el-form-item label="设置提醒行为" prop="aaaa" required>
          <div>
            <p style="font-weight:600">行为提醒</p>
            <el-checkbox-group v-model="form.checkList1">
              <el-checkbox label="1">发送带二维码图片</el-checkbox>
              <el-checkbox label="2">发送链接分享</el-checkbox>
              <el-checkbox label="3">发送小程序</el-checkbox>
              <el-checkbox label="4">发送名片</el-checkbox>
            </el-checkbox-group>
            <p style="font-weight:600">关键词提醒</p>
            <el-checkbox-group v-model="form.checkList2">
              <el-checkbox label="1">聊天消息中包含以下关键词</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
      </div>
    </el-form>

    <el-dialog title="选择群聊" :visible.sync="dialogTableVisible">
      <el-input placeholder="请输入群名称" suffix-icon="el-icon-search" v-model="queryForm.input1"
        style="width: 180px; margin-bottom: 10px" @blur="getGroupLists" @change="getGroupLists">
      </el-input>
      <el-table :data="gridData" ref="multipleTable" @select="handleSelectionChange" @select-all="selectAll"
        :height="440">
        <el-table-column label="序号" type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column property="chatId" label="群ID" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column property="groupName" label="群名称" align="center"></el-table-column>
        <el-table-column property="groupLeaderName" label="群主" align="center"></el-table-column>
        <el-table-column property="memberCount" label="群人数" align="center"></el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
        layout="total,sizes,prev, pager, next" :page-sizes="[20, 30, 50]" :page-size="queryForm.pageSize"
        :total="pagetotal" style="text-align: right; margin-top: 10px">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="determination">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGroupList,
  addGroupCode,
  liveCodeGroupList,
  welcomList,
  uploadInterface,
  groupConfig,
  establish,
  editCreate,
} from "@/api/operate/verbalTrick";
export default {
  name: "GroupMonitoringAdd",
  data() {
    return {
      title: "创建方案",
      addLoading: false,
      dialogTableVisible: false,
      form: {
        checkList1: [],
        checkList2: [],
      },
      rules: {},
      // 查询参数
      queryForm: {
        pageNum: 1,
        pageSize: 20,
      },
      gridData: [],
      pagetotal: 0,
      selectRow: {},
    };
  },
  created() {},
  methods: {
    addOrUpdateTask() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.addLoading = true;
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addLoading = false;
          this.$router.go(-1);
        }
      });
    },
    Openpopover() {
      this.dialogTableVisible = true;
      this.getGroupLists();
      // this.subscript = i;
      // console.log(i, row, "----------------row");
      // if (row.groupName) {
      //   this.choosenName = row.groupName;
      // }
    },
    determination() {
      this.form.rowChatid = this.selectRow.chatId;
      this.form.groupName = this.selectRow.groupName;
      this.dialogTableVisible = false;
    },
    // 群列表
    getGroupLists() {
      const data = {
        groupName: this.queryForm.input1,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      liveCodeGroupList(data).then((res) => {
        if (res.code === 200) {
          this.pagetotal = res.total;
          this.gridData = res.rows;
        }
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGroupLists();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getGroupLists();
    },
    // 返回
    goBack() {
      this.$router.go(-1);
    },
    // 实现单选
    handleSelectionChange(val, row) {
      console.log(val, row, "-----------row");
      this.$refs.multipleTable.clearSelection(); //清除选择
      this.$refs.multipleTable.toggleRowSelection(row, true);

      this.selectRow = row;

      // this.rowChatid = row.chatId;
      // this.groupName = row.groupName;
      // this.scanCodeTimesLimit = row.scanCodeTimesLimit;
    },
    // 清除全选
    selectAll() {
      this.$refs.multipleTable.clearSelection(); //清除选择
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
</style>